// siderbar
var tabs=document.getElementById("tab_head").getElementsByTagName("li");
var uls = document.getElementById("box_body").getElementsByTagName("ul");

function bar_change(obj){
    for(var i=0;i<tabs.length;i++){
        if(tabs[i]==obj){
            tabs[i].className="on";
            uls[i].className="selected";
        }
        else{
            tabs[i].className="";
            uls[i].className="";
        }

    }
        
}

for(var i=0;i<tabs.length;i++){
    tabs[i].onmouseover=function(){
        bar_change(this)
    }
}



//coursel
var pic = document.getElementById("pic");
var f_list= document.getElementById("list")
var list = document.getElementById("list").getElementsByTagName("li");
var left_b = document.getElementById("btn_left");
var right_b = document.getElementById("btn_right");
var index=0;
var time = null;

function auto() {
	
	time=setInterval(function(){
	index++;
	index = index % list.length;
	    img_change(index)
	},3000)
	
}
	auto();

// 选择要显示的序号和图片
function img_change(cur_index){
	pic.style.marginTop=-250*cur_index+"px";
	for(var i=0;i<list.length;i++){
        list[i].className = " ";
	}
	list[cur_index].className="on";
	index=cur_index;
}

//第一次代码问题在这里，这里只是指定父元素pic，会产生（鼠标悬停在图片上可以暂停，但是放在pic的子元素诸如翻页按钮，序号上时并不生效）的问题
//这个问题应该可以在用vue的时候解决
// 鼠标悬停，清除计时器，暂停滚动
// pic.onmouseover=function(){
//     pic.style.cursor="pointer"
//     clearInterval(time);
// }
//鼠标离开，继续滚动
// pic.onmouseout = auto;
//写成函数
function overstop_outchange(obj) {
    obj.onmouseover = function () {
        obj.style.cursor = "pointer";
        clearInterval(time);
    }
    obj.onmouseout = auto;
}
overstop_outchange(f_list);
overstop_outchange(pic);
overstop_outchange(left_b);
overstop_outchange(right_b);


// 鼠标悬停时切换对应的序号
for (var i=0;i<list.length;i++){
	//id等于自身的下标
	list[i].id = i
	list[i].onmouseover=function(){
		img_change(this.id)
	}
}
//按钮点击切换
left_b.onclick = function () {
	index--;
	if (index <= 0) {
		index += list.length - 1;
	}
	img_change(index);
}


right_b.onclick = function () {
	index++;
	index = index % list.length;
	img_change(index);
}

function show_btn(obj) {
	var buttons = obj.getElementsByTagName("div");
	for (var i = 0; i < buttons.length; i++){
		buttons[i].children[0].style.display = "block" 
	}
}

function hidden_btn(obj) {
	var buttons = obj.getElementsByTagName("div");
	for (var i = 0; i < buttons.length; i++){
		buttons[i].children[0].style.display = "none" 
	}
}


//coursel-mobile,手机端轮播图
var m_pic = document.getElementById("pic-mobile");
var m_f_list= document.getElementById("list-mobile")
var m_list = document.getElementById("list-mobile").getElementsByTagName("li");
var m_index=0;
var m_time = null;

function m_auto() {
	clearInterval(time);
	m_time=setInterval(function(){
	m_index++;
	m_index = m_index % m_list.length;
	    m_img_change(m_index)
	},3000)
	
}
	m_auto();

// 选择要显示的序号和图片
function m_img_change(cur_index){
	m_pic.style.marginTop = -175 * cur_index + "px";
	console.log(m_list.length)
	for(var i=0;i<m_list.length;i++){
        m_list[i].className = " ";
	}
	m_list[cur_index].className="on";
	m_index=cur_index;
}



// 点击切换回对应的序号,手机端换用onclick
for (var i=0;i<m_list.length;i++){
	//id等于自身的下标
	m_list[i].id = i
	m_list[i].onclick=function(){
		m_img_change(this.id)
	}
}
//手机轮播图结束



//通过滚动条的高度实现header的margin-top的动态隐藏
var header = document.getElementsByClassName("header")[0];
var main = document.getElementsByClassName("main")[0];

function hidden_header_top() {
	header.setAttribute("style", "margin-top:0;position:fixed;")
	main.style.marginTop = "120px";
}
function show_header_top() {
	header.setAttribute("style", "margin-top:1em;transition:all .3s")
	main.style.marginTop = "0";
}
window.onload = function () {
	var window_width = window.screen.width
	window.onscroll = function () {//滚轮事件绑定
		var heightTop = document.documentElement.scrollTop || document.body.scrollTop
		//判断滚动条的高度，为0(滚动到顶端)自动显示header的上边距
		if (window_width > 768) {//这个效果在屏幕宽度大于768px时才启动
			if (heightTop != 0) {
				hidden_header_top();
			}
			else {
				show_header_top();
			}
		}
	}
}

